﻿
//function init()
//{
//    window.cl = new CtnList("cl", "cl");
//    cl.page.totalcount = 100;
//    cl.page.onGoPage = function(page){
//        cl.reset();
//        for (var i = 1; i<= 10; i++)
//        {
//            cl.add("title" + ((page - 1)*cl.page.pagesize + i),"");
//        }
//        cl.show();
//        cl.expandAll(false);
////        cl.toggle(0);
//    }
//    cl.onTitleClicking = function(evt, i){
//    if (this.getItem(i).body == "")
//        this.update(i, {body:"new body"});
//    }
//    cl.page.goPage(1);
//}

function CtnList(name, id)
{
    this.name = name;
    this.id = id;
    this.classname = "ctnlist";
    this.items = [];
    this.add = CtnList.add;
    this.update = CtnList.update;
    this.remove = CtnList.remove;
    this.reset = CtnList.reset;
    this.clean = CtnList.clean;
    this.show = CtnList.show;
    this.getItem = CtnList.getItem;
    this.toggle = CtnList.toggle;
    this.expandAll = CtnList.expandAll;
    this.onTitleClicking = null;
    this.onBodyClicking = null;
    this.titleClick = CtnList.titleClick;
    this.bodyClick = CtnList.bodyClick;
    this.init = CtnList.init;
    this.$ = CtnList.$;
//    this.totalcount = 0;
//    this.pagesize = 10;
//    this.goPage = CtnList.goPage;
//    this.onGoPage = null;
    this.page = new CtnPage(this.name + ".page", this.id + '_page');
//    this.page.onGoPage = this.onGoPage;
}
CtnList.$ = function(id)
{
    return document.getElementById(id);
}
CtnList.init = function(o)
{
    if (o)
    {
       for (var k in o)
       {
        this[k] = o[k];
       } 
    }
}
CtnList.goPage = function(page)
{
    this.page.goPage(page);
}
CtnList.add = function(t, c, d)
{
    this.items.push({title:t, body:c, data:d});
    return this.items.length - 1;
}
CtnList.getItem = function(i)
{
    return this.items[i];
}
CtnList.update = function(i, options)
{
    if (options.title){
        this.items[i].title = options.title;
        this.$(this.id + "_t" + i).innerHTML = options.title;
    }
    if (options.body){
        this.items[i].body = options.body;
        this.$(this.id + "_b" + i).innerHTML = options.body;
    }
}
CtnList.remove = function(i)
{
    this.items.slice(i,1);
}
CtnList.reset = function()
{
    while(this.items.length > 0)
    {
        this.items.pop();
    }
}
CtnList.clean = function()
{
    while(this.items.length > 0)
    {
        this.items.pop();
    }
}
CtnList.show = function()
{
    var buf = new Array();
    buf.push('<div id="' + this.id + '_page"></div>');
    buf.push('<div class="' + this.classname + '" id="' + this.id + '_main">');
    for (var i = 0; i < this.items.length; i++)
    {
        buf.push('<div class="item" id="' + this.id + '_i' + i + '">');
        buf.push('<div class="title" id="' + this.id + '_t' + i + '" onclick="' + this.name + '.titleClick(event,' + i + ')">' + this.items[i].title + '</div>');
        buf.push('<div class="body" id="' + this.id + '_b' + i + '" onclick="' + this.name + '.bodyClick(event,' + i + ')">');
        buf.push(this.items[i].body);
        buf.push('</div>');
        buf.push('</div>');
    }
    buf.push('</div>');
    this.$(this.id).innerHTML = buf.join("");
//    this.page.totalcount = this.totalcount;
//    this.page.pagesize = this.pagesize;
    if (this.page.onGoPage)
    {
        this.page.show();
    }
}
CtnList.toggle = function(i)
{
    var e = this.$(this.id + '_b' + i);
    if (e.style.display == "none")
    {
        e.style.display = "";
    }
    else
    {
        e.style.display = "none";
    }
}
CtnList.expandAll = function(f)
{
    var v = f ? "": "none";
    for (var i = 0; i < this.items.length; i++)
    {
        this.$(this.id + '_b' + i).style.display = v;
    }
}
CtnList.setStyle = function(val)
{
    if (typeof(val) == "string")
    {
        this.classname = val;
        obj.className = val;
    }
    else if(typeof(val) == "object")
    {
        this.styleobj = val;
        for (var k in val)
        {
            this.$(this.id).style[k] = val[k];
        }
    }
    else if (typeof(val) == "number")
    {
        
    }
}
CtnList.titleClick = function(evt, i)
{
    evt = evt||window.event;
    if (this.onTitleClicking)
    {
        if (this.onTitleClicking(evt, i))
        {
            return ;
        }
    }
    this.toggle(i);
}
CtnList.bodyClick = function(evt, i)
{
    evt = evt||window.event;
    if (this.onBodyClicking)
    {
        if (this.onBodyClicking(evt, i))
        {
            return ;
        }
    }
    
}